import { Component, OnInit, EventEmitter, Input, Output, Renderer2, ElementRef, ViewChild, HostListener, OnDestroy, AfterViewInit } from '@angular/core';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
import { dropAnimation } from './animation';
import { DocumentWrapper } from '../shared/services/index';

@Component({
  selector: 'el-dropdown',
  templateUrl: './dropdown.component.html',
  animations: [dropAnimation],
})
export class DropdownComponent implements OnDestroy, AfterViewInit {
  @Input() model: Array<string> = [];
  @Input('split-button') splitButton: boolean = false;
  @Input() size: string = '';
  @Input() type: string = '';
  @Input() menuAlign: string = 'end';
  @Input() menuNoWrap: boolean = false;
  //触发下拉的行为 hover, click
  @Input() trigger: string = 'hover';
  @Input('hide-on-click') hideOnClick: boolean = true;
  @Output('visible-change') visibleChange: EventEmitter<any> = new EventEmitter();
  @Output('command') selected: EventEmitter<any> = new EventEmitter();
  private renderer: any;
  private sanitizer: any;
  private document: any;
  private el: any;
  @ViewChild('list') list: any;
  showMenu: boolean = false;
  timer: any;
  slideToBottom: boolean = false;
  listHeight: number = 0;
  globalListenFunc: any;
  globalScrollFunc: any;
  @HostListener('mouseleave') mouseleave: () => void;
  @HostListener('mouseenter') mouseenter: () => void;

  constructor(renderer: Renderer2, sanitizer: DomSanitizer, document: DocumentWrapper, el: ElementRef) {
    var _this = this;
    this.renderer = renderer;
    this.sanitizer = sanitizer;
    this.document = document;
    this.el = el;
    this.showMenu = false;
    this.slideToBottom = true;
    this.mouseleave = function () {
      if (_this.trigger !== 'hover')
        return;
      _this.timer = setTimeout(function () {
        _this.closeMenu();
        clearTimeout(_this.timer);
      }, 400);
    };
    this.mouseenter = function () {
      if (_this.trigger !== 'hover')
        return;
      _this.timer && clearTimeout(_this.timer);
      !_this.showMenu && _this.visibleChange.emit();
      _this.showMenu = true;
    };
  }

  openMenu(event?: Event): void {
    var _this = this;
    event && event.stopPropagation();
    this.showMenu = !this.showMenu;
    this.visibleChange.emit();
    this.globalListenFunc = this.renderer.listen('document', 'click', function () {
      _this.closeMenu();
    });
  };


  closeMenu(): void {
    this.showMenu = false;
    this.visibleChange.emit();
    this.globalListenFunc && this.globalListenFunc();
  };


  selectHandle(model: any): void {
    this.selected.emit(model);
    this.hideOnClick && this.closeMenu();
  };


  makeListStyles(): SafeStyle {
    var /** @type {?} */ styles = "top: " + (this.slideToBottom ? '100%' : (0 - this.listHeight) + 'px') + ";" +
      ((this.menuAlign === 'end' ? 'right' : 'left') + ": 0; position: absolute; min-width: 100px;") +
      ("white-space: " + (this.menuNoWrap ? 'nowrap' : 'normal'));
    return this.sanitizer.bypassSecurityTrustStyle(styles);
  };


  ngAfterViewInit(): void {
    var _this = this;
    this.listHeight = this.list.nativeElement.offsetHeight + 12;
    this.globalScrollFunc = this.renderer.listen('window', 'scroll', function () {
      var /** @type {?} */ top = _this.el.nativeElement.getBoundingClientRect().top;
      var /** @type {?} */ nextValue = _this.document.documentElement.clientHeight - top > _this.listHeight;
      if (nextValue !== _this.slideToBottom) {
        _this.slideToBottom = nextValue;
      }
    });
  };


  ngOnDestroy(): void {
    this.globalListenFunc && this.globalListenFunc();
    this.globalScrollFunc && this.globalScrollFunc();
  };

}
